<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>练习题</title>
</head>
<body>
	<!--
		1:用户名必须是3-10为英文字母/数字
		2:口令必须是6-20位
		3:两次输入的口令必须一致
	-->
	<form id="register" action="#" target="_blank" onsubmit="return checkRegister()">
		<p id="error" style="color: red"></p>
		<p>
			用户名<input id="user-name" name="userName" type="text">
		</p>
		<p>
			密码<input id="password1" type="password">
		</p>
		<p>
			重复密码<input id="password2" type="password">
		</p>
		<button type="submit">提交</button><button type="reset">重置</button>
	</form>
<script>
	function checkRegister() {
		let
			userName = document.getElementById("user-name").value,
			regExpUserName = /^\w{3,10}$/,
			password1 = document.getElementById("password1").value,
			password2 = document.getElementById("password2").value,
			regExpPassword = /^\S{6,20}$/,
			error = document.getElementById("error");

		if (!regExpUserName.exec(userName)) {
			error.innerText = "用户名必须是3-10为英文字母/数字!"
			return false;
		}
		if (!regExpPassword.exec(password1)) {
			error.innerText = "口令必须是6-20位";
			return false;
		}
		if (password1 !== password2) {
			error.innerText = "两次输入的口令必须一致";
			return false;
		}
		console.log("验证通过!!");
		return true;
	}
</script>
</body>
</html>